<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PMTiles Tile Server Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@5.13.0/dist/maplibre-gl.css">
    <script src="https://unpkg.com/maplibre-gl@5.13.0/dist/maplibre-gl.js"></script>
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        const map = new maplibregl.Map({
            container: 'map',
            style: 'http://localhost:3000/style.json',
            center: [0, 20],
            zoom: 2
        });

        map.addControl(new maplibregl.NavigationControl());
    </script>
</body>
</html>
